<template>
	<view class="MakeVisitWrap">
		<u--form ref="makeVisitSave" labelWidth="70" :model="makeVisitObj" :rules="rules">
			<view class="topModular borderWrap">
				<u-form-item label="到访日期:" prop="arrivalTime" borderBottom required @click="arrivalTimeClick">
					<u--input disabled disabledColor="#ffffff" suffixIcon="arrow-right" placeholder="请选择到访日期" v-model="makeVisitObj.arrivalTime" border="none"></u--input>
				</u-form-item>
				<u-form-item label="到访对象:" prop="arrivalObj" borderBottom required>
					<u--input clearable placeholder="请填写到访对象" v-model="makeVisitObj.arrivalObj" border="none"></u--input>
				</u-form-item>
				<u-form-item label="到访人数:" prop="arrivalPersonnel" borderBottom required>
					<u--input clearable type="digit" placeholder="请填写到访人数" v-model="makeVisitObj.arrivalPersonnel" border="none"></u--input>
				</u-form-item>
			</view>
			<view class="middleModular borderWrap">
				<u-form-item label="到访目的:" labelPosition ="top">
					<u--textarea count v-model="makeVisitObj.arrivalPurpose" placeholder="请填写到访目的" ></u--textarea>
				</u-form-item>
			</view>
			<view class="topModular borderWrap">
				<u-form-item label="您的姓名:" prop="name" borderBottom required>
					<u--input clearable placeholder="请填写您的姓名" v-model="makeVisitObj.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="您的性别:" borderBottom required @click="openPickerChange">
					<u--input clearable placeholder="请选择您的性别" suffixIcon="arrow-right" :value="setPickerType(makeVisitObj.sex)" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系电话:" prop="telephone" borderBottom required>
					<u--input clearable type="digit" placeholder="请填写联系电话" v-model="makeVisitObj.telephone" border="none"></u--input>
				</u-form-item>
			</view>
			<u-button customStyle="margin-top:20px;font-size:18px;border-radius:30px"
			:loading="IfImplementEvent" size="large" color="#E41335"
			text="立即提交" @click="makeVisitSubmit">
			</u-button>
		</u--form>
		<picker-time @DateChange="DateChange" @pickerChange="pickerChange" modeTime="date" ref="pickerTimeVisit" 
		:title="makeVisitPop.title" :pickerColumns="makeVisitPop.pickerColumns" :selectorType="makeVisitPop.selectorType" :formatterType="formatter">
		</picker-time>
	</view>
</template>

<script>
	import implementStateButton from "@/mixins/implementStateButton.js"
	import {setNavTitle} from '@/utils/common.js'
	import {mapState} from "vuex"
	export default {
		mixins:[implementStateButton],
		data() {
			return {
				param:{},//接收参数
				makeVisitPop:{
					title:'到访日期',
					selectorType:'date',
					pickerColumns:[['男','女']],
				},
				makeVisitObj:{
					arrivalTime:uni.$u.timeFormat(new Date(),"yyyy-mm-dd"),
					arrivalObj:'',//到访对象
					arrivalPersonnel:'',//到访人数
					arrivalPurpose:'',//到访目的
					name:'',
					sex:'0',
					telephone:''
				},
				rules: {
					'arrivalObj': {
						type: 'string',
						required: true,
						message: '请填写到访对象',
						trigger: ['blur', 'change']
					},
					'arrivalPersonnel': {
						type: 'number',
						required: true,
						message: '请填写到访人数',
						trigger: ['blur', 'change']
					},
					"name":{
						type: 'string',
						required: true,
						message: '请填写您的姓名',
						trigger: ['blur', 'change']
					},
					"telephone":[
						{
							type: 'number',
							required: true,
							message: '请填写联系电话',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					]
				},
			};
		},
		computed:{
			...mapState('m_user',["userInfo"]),
			setPickerType(){//男女转换
				return function(value){
					return this.makeVisitPop.pickerColumns[0][value]
				}
			}
		},
		methods:{
			arrivalTimeClick(){//打开时间选择弹窗
			    this.makeVisitPop.title='到访日期'
				this.makeVisitPop.selectorType='date'
				this.$refs.pickerTimeVisit.dateSelectorShow=true
			},
			DateChange(time){//时间 弹窗确定按钮时触发
				this.makeVisitObj.arrivalTime=time
			},
			openPickerChange(){//打开picker弹窗
			    this.makeVisitPop.selectorType='picker'
				this.makeVisitPop.title='您的性别'
				this.$refs.pickerTimeVisit.pickerSelectorShow=true
			},
			pickerChange(value){//picker 弹窗确定按钮时触发
				this.makeVisitObj.sex=value
			},
			makeVisitSubmit(){
				
			},
			formatter(type, value){
				if (type === 'year') {
			        return `${value}年`
			    }
			    if (type === 'month') {
			        return `${value}月`
			    }
			    if (type === 'day') {
			        return `${value}日`
			    }
			    return value
			},
			setmakeVisitObj(){
				if(JSON.stringify(this.userInfo)=="{}")  return
				this.makeVisitObj.name=this.userInfo.userName
				this.makeVisitObj.sex=this.userInfo.sex
				this.makeVisitObj.telephone=this.userInfo.phone
			}
		},
		onReady(){//监听页面初次渲染完成
			setNavTitle(this.param.title)//设置导航栏标题
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.makeVisitSave.setRules(this.rules)
		},
		onLoad(option) {
			this.param=option
			this.setmakeVisitObj()
		},
	}
</script>
<style lang="scss" scoped>
.MakeVisitWrap{
	padding:10px;
	.topModular{
		padding:10px 15px 20px 15px;
		box-sizing: border-box;
	}
	.middleModular{
		padding:10px 15px;
		box-sizing: border-box;
		margin:20px 0;
	}
}
</style>
